$(function (){
  // 定义变量保存文章的id
  let cateId = null
  // 功能一：实现文章分类的渲染
  /* 
    【1】定义函数，在函数中发起Ajax请求
    【2】判断请求是否成功
    【3】如果成功，渲染到下拉框中(art-template)
  */
  function renderArtCateEdit(){
    $.ajax({
      url: '/my/article/cates',
      success: function(res){
        if(res.status !== 0) return layer.msg(res.message,{icon: 5})
        layer.msg(res.message,{icon: 6})
  
        const str = template('art_cate',res)
        $('[name="cate_id"]').html(str)
        // 设置select下拉框的选中值
        $('[name="cate_id"]').val(cateId)
        // 尽管 form 会对表单进行自动渲染，单当元素插入时,
        // 需要通过核心方法  form.render(type,filter) 来进行渲染
        layui.form.render()
      }
    })
   }
   renderArtCateEdit()

  //  功能二：初始化富文本编辑器的效果
  initEditor();
  // 功能三：实现图片裁剪的效果
  //初始化裁剪效果
  const $image = $("#image");
  $image.cropper({
    //裁剪区域的宽高比例
    aspectRatio: 1 / 1,
    preview: ".img-preview",
  });
  //功能四: 更换裁剪图片
  $("#btnChooseImage").on("click", function () {
    $("#coverFile").click();
  });
  /* 
  [1]监听文件选择框的change事件
  [2]判断是否选择了文件
  [3]如果选择了,获取到上传的文件信息
  [4]将文件转换成路径的形式
  [5]先销毁裁剪区域,然后设置img的src属性,最后初始化
  */
  $("#coverFile").on("change", function () {
    const fileInfo = this.files;
    if (fileInfo.length === 0) return layer.msg("请选择上传的图片");
    const file = fileInfo[0];
    const url = URL.createObjectURL(file);
    $image.cropper("destroy");
    $image.attr("src", url);
    $image.cropper({
      //裁剪区域的宽高比例
      aspectRatio: 1 / 1,
      preview: ".img-preview",
    });
  });

  // 功能五：实现编辑的回显功能
  /* 
   【1】定义函数
   【2】获取编辑的这条数据的id
   【3】发起Ajax请求
   【4】判断请求成功与否
   【5】如果成功，将数据渲染表单域上
  */
 function renderEditData(){
  const id = location.search.split('=')[1]
  $.ajax({
    url: `/my/article/${id}`,
    success: function(res){
      const {status,message,data} = res
      if(status !==0) return layer.msg(message,{icon:5})
      // 现将裁剪区销毁，然后设置图片的src属性，最后重新初始化
      $image.cropper('destroy')
      $image.attr('src','http://big-event-api-t.itheima.net'+data.cover_img)
      // 将cate_id
      cateId = data.cate_id;
      layui.form.val('form-edit',data)
    }
  })
 }
 renderEditData()


 //功能六：实现编辑
   /* 
   【1】给表单注册submit提交事件
   【2】阻止表单的默认行为
   【3】收集表单数据
   【4】对数据进行校验
   【5】如果校验成功，发起Ajax请求
   【6】判断请求成功与否
   【7】苏果成功，跳转到文章列表面
   
   */
   let id = null;
  $('#form-pub').on('submit',function(e){
    e.preventDefault()
    const fd = new FormData(this)
    // 追加文章的id
    fd.append('Id',id)
    // 收集裁剪之后的图片信息
    $image.cropper('getCroppendCanvas',{
      width:400,
      height:200
    }).o((blob)=>{
      fd.append('cover_img',blob)
      $.ajax({
        method: 'post',
        url:'/my/article/edit',
        data: fd,
        contentType:false,
        processData:false,
        success: function(res){
        if(res.status !== 0) return layer.msg(res.message,{icon: 5})
        layer.msg(res.message,{icon: 6})
        location.href = '/article/art_list.html'
        }
      })
    })
  }) 
})